<div layout="row" layout-wrap>
    <div flex-xs="100" flex-sm="50" flex-md="33" flex-gt-md="25" ng-repeat="batch in batchList track by $index">
        <md-card ng-click="showBatch(batch.batchNumber)" md-colors="{{batchColor(batch)}}">
            <md-card-content>
                <div layout="row" layout-align="space-between center" style="word-break: keep-all; white-space:nowrap; overflow: hidden; text-overflow:ellipsis;">
                    <div flex="30">
                        <span>{{ batch.orderName }}</span>
                        <span>
                            <span ng-if="batch.status === 'AVAILABLE'">
                                ({{batch.availableCount}} / {{batch.totalCount}})
                            </span>
                            <span ng-if="batch.status !== 'AVAILABLE'">
                                ({{batch.totalCount}})
                            </span>
                        </span>
                    </div>
                    <div flex="70" style="text-align:right; color: #aaa; font-size: 0.8em;">{{batch.createTime | timeago}}</div>
                </div>
                <div layout="row" layout-align="space-between center" style="word-break: keep-all; white-space:nowrap; overflow: hidden; text-overflow:ellipsis;">
                    <div flex="100" style="color: #aaa; font-size: 0.8em;">{{ batch.comment || '-' }}</div>
                </div>
            </md-card-content>
        </md-card>
    </div>
</div>